<template>
  <aside 
    :class="[
      'bg-white dark:bg-neutral-800 shadow-lg transition-all duration-300 flex flex-col',
      collapsed ? 'w-20' : 'w-64'
    ]"
  >
    <!-- Logo 区域 -->
    <div class="h-16 flex items-center justify-center border-b border-neutral-200 dark:border-neutral-700">
      <transition name="fade" mode="out-in">
        <div v-if="!collapsed" class="text-xl font-bold text-primary-500 flex items-center gap-2">
          <i class="fas fa-shield-alt"></i>
          <span>权限管理系统</span>
        </div>
        <div v-else class="text-2xl text-primary-500">
          <i class="fas fa-shield-alt"></i>
        </div>
      </transition>
    </div>

    <!-- 导航菜单 -->
    <nav class="flex-1 overflow-y-auto py-4">
      <el-menu
        :default-active="activeMenu"
        :collapse="collapsed"
        :collapse-transition="false"
        class="border-none"
        background-color="transparent"
        text-color="#595959"
        active-text-color="#1890ff"
      >
        <!-- 账户与权限管理 -->
        <el-sub-menu index="1">
          <template #title>
            <el-icon><i class="fas fa-users"></i></el-icon>
            <span>账户与权限管理</span>
          </template>
          <el-menu-item index="/users/list" @click="navigateTo('/users/list')">
            <el-icon><i class="fas fa-list"></i></el-icon>
            <span>用户列表</span>
          </el-menu-item>
          <el-menu-item index="/users/add" @click="navigateTo('/users/add')">
            <el-icon><i class="fas fa-user-plus"></i></el-icon>
            <span>新增用户</span>
          </el-menu-item>
          <el-menu-item index="/users/roles" @click="navigateTo('/users/roles')">
            <el-icon><i class="fas fa-user-tag"></i></el-icon>
            <span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/users/profile" @click="navigateTo('/users/profile')">
            <el-icon><i class="fas fa-id-card"></i></el-icon>
            <span>个人档案</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 授权管理 -->
        <el-sub-menu index="2">
          <template #title>
            <el-icon><i class="fas fa-key"></i></el-icon>
            <span>授权管理</span>
          </template>
          <el-menu-item index="/authorization/list" @click="navigateTo('/authorization/list')">
            <el-icon><i class="fas fa-clipboard-list"></i></el-icon>
            <span>授权列表</span>
          </el-menu-item>
          <el-menu-item index="/authorization/certificates" @click="navigateTo('/authorization/certificates')">
            <el-icon><i class="fas fa-certificate"></i></el-icon>
            <span>许可证书列表</span>
          </el-menu-item>
          <el-menu-item index="/authorization/applications" @click="navigateTo('/authorization/applications')">
            <el-icon><i class="fas fa-file-alt"></i></el-icon>
            <span>我的申请</span>
          </el-menu-item>
          <el-menu-item index="/authorization/event-log" @click="navigateTo('/authorization/event-log')">
            <el-icon><i class="fas fa-history"></i></el-icon>
            <span>事件日志</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 在线操作 -->
        <el-sub-menu index="3">
          <template #title>
            <el-icon><i class="fas fa-bolt"></i></el-icon>
            <span>在线操作</span>
          </template>
          <el-menu-item index="/online/activate" @click="navigateTo('/online/activate')">
            <el-icon><i class="fas fa-play-circle"></i></el-icon>
            <span>在线激活</span>
          </el-menu-item>
          <el-menu-item index="/online/transfer" @click="navigateTo('/online/transfer')">
            <el-icon><i class="fas fa-exchange-alt"></i></el-icon>
            <span>设备迁移</span>
          </el-menu-item>
          <el-menu-item index="/online/revoke" @click="navigateTo('/online/revoke')">
            <el-icon><i class="fas fa-ban"></i></el-icon>
            <span>授权撤销</span>
          </el-menu-item>
          <el-menu-item index="/online/renewal" @click="navigateTo('/online/renewal')">
            <el-icon><i class="fas fa-sync-alt"></i></el-icon>
            <span>授权续期</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </nav>
  </aside>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

defineProps({
  collapsed: Boolean
})

const router = useRouter()
const route = useRoute()

const activeMenu = ref(route.path)

watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
})

const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}

.el-menu-item {
  transition: all 0.3s;
}

.el-menu-item:hover {
  background-color: #f5f5f5 !important;
}

.dark .el-menu-item:hover {
  background-color: #262626 !important;
}

.el-menu-item.is-active {
  background-color: #e6f4ff !important;
  border-right: 3px solid #1890ff;
}

.dark .el-menu-item.is-active {
  background-color: #003eb3 !important;
}

:deep(.el-sub-menu__title) {
  transition: all 0.3s;
}

:deep(.el-sub-menu__title:hover) {
  background-color: #f5f5f5 !important;
}

.dark :deep(.el-sub-menu__title:hover) {
  background-color: #262626 !important;
}

:deep(.el-icon) {
  font-size: 16px;
}
</style>

